<template>
  <div>
      <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="4">
              <el-input placeholder="请输入搜索内容" :clearable="true" size="small"></el-input>
          </el-col>
          <el-col :span="4">
              <el-select value="4" placeholder="请选择" size="small">
                <el-option label="视频" value="4"></el-option>
                <el-option label="文章" value="5"></el-option>
                <el-option label="全部" value=""></el-option>
              </el-select>
          </el-col>
          <el-col :span="4">
              <el-button icon="el-icon-search" size="small" >搜索</el-button>
          </el-col>
        </el-row>
      </el-header>

      <el-main>
          <el-table
            v-loading="listLoading"
            :data="pageInfo.records"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
          >

          <el-table-column align="center" label="标题" width="150">
            <template slot-scope="scope">
              {{ scope.row.title }}
            </template>
          </el-table-column>

          <el-table-column label="单位" width="100" align="center">
            <template slot-scope="scope">
              {{ scope.row.inputInstitutionName }}
            </template>
          </el-table-column>

          <el-table-column label="村庄" width="100" align="center">
            <template slot-scope="scope">
              {{ scope.row.villageName }}
            </template>
          </el-table-column>

          <el-table-column label="提交人" width="110" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.inputUserName }}</span>
            </template>
          </el-table-column>

          <el-table-column label="提交时间" width="200" align="center">
            <template slot-scope="scope">
              <i class="el-icon-time" />
              <span>{{ scope.row.inputTime }}</span>
            </template>
          </el-table-column>

          <el-table-column class-name="status-col" label="状态" width="110" align="center">
            <template slot-scope="scope">
              {{ scope.row.status }}
            </template>
          </el-table-column>

          <el-table-column align="center" prop="created_at" label="解决/返回时间" width="200">
            <template slot-scope="scope">
              <i class="el-icon-time" />
              <span>{{ scope.row.inputTime }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="showInfo = true">详情</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-main>

      <el-footer>
        <el-pagination
          background
          :current-page="1"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="50">
        </el-pagination>
      </el-footer>

    </el-container>

    <!--弹框(编辑新增)-->
    <el-dialog title="详情" :visible.sync="showInfo">
    	<info @closeDialog="showInfo = false" ></info>
    </el-dialog>

  </div>
</template>

<script>
import info from './components/info.vue';
import request from '@/utils/request'

export default {
  components: {
  	info
  },
  data() {
    return {
      pageInfo: {},
      listLoading: true,
      showInfo: false,
      searchData: {
        currentPage: 1
      }
    }
  },
  created() {
    this.getcontradictionRecordListPage(1)
  },
  methods: {
    getcontradictionRecordListPage(currentPage) {
      this.listLoading = true
      this.searchData.currentPage = currentPage;

      request({
        url: '/api/contradictionRecord/getcontradictionRecordListPage',
        method: 'get',
        params: this.searchData
      }).then((res) => {
        console.log(res)
        this.pageInfo = res.result;
        this.listLoading = false
      }).catch(() => {

      })

    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
}
</script>
<style scoped>
  html,body {
    height:100%;
  }
  .el-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 0;
    left:0;
  }
  .el-header {
    line-height: 60px;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .el-footer {
    flex-grow: 0;
    flex-shrink: 0;
  }
  .el-main {
    flex-grow: 1;
    flex-shrink: 1;
    overflow-y: auto;
  }
</style>
